<template>
  <div class="exception-page">
    <van-nav-bar title="积分抽奖" left-text="返回" left-arrow @click-left="onClickLeft" class="custom-nav" />
  </div>
  <div class="lottery-container">
    <!-- 添加广告标语 -->
    <div class="slogan">
      欢迎广大充电用户来抽奖车载香氛
    </div>

    <nutbig-squarenine :prize-list="dataArr" :prize-id="prizeId" :cardImg="cardImg" @click="click">
    </nutbig-squarenine>

    <!-- 添加中奖历史记录展示区域 -->
    <div class="history-container">
      <h3>中奖历史记录</h3>
      <div class="history-list">
        <div v-for="(item, index) in historyList" :key="index" class="history-item">
          <span>{{ index + 1 }}</span>
          <span v-if="item.chargeUserGift.name !== '未中奖'">{{item.chargeUserGift.name}}-{{ item.chargeUserGift.description }}</span>
          <span v-if="item.chargeUserGift.name === '未中奖'">很遗憾未中奖~</span>
          <span v-if="item.chargeUserGift.name !== '未中奖'">{{ item.chargeUserGift.point }}积分</span>
          <el-button type="success" :disabled="item.clicked" @click="exchangeGoods(item, index)"
            v-if="item.status == 0 && item.chargeUserGift.name !== '未中奖'">兑换</el-button>
          <el-button type="danger" :disabled="item.clicked" v-if="item.status == 1">已兑换</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { GetGiftsJs, GetLotteryHistory, AddLotteryRecord, ExchangeGoods, GetUserInfo } from "@/api/user";
import { ElMessage } from "element-plus";


// 使用ref创建响应式数据prizeId和cardImg
const prizeId = ref();
const cardImg = ref("//img11.360buyimg.com/imagetools/jfs/t1/73511/35/17197/9388/613852cdE75dc6822/ddb31e0f3cfdcb81.png");

const onClickLeft = () => history.back()

// 使用reactive创建响应式数据dataArr
const dataArr = ref([])
// 控制该用户是否可以抽奖的开关
const flag = ref(false)
// 获取当前登录用户的积分
function getUserInfo() {
  GetUserInfo()
    .then(res => {
      if (res.data.code == 200000) {
        if (res.data.data.point >= 100) {
          flag.value = true
         /*  console.log(res.data.data.point); */
        } else {
          flag.value = false
        }
      }
    })
}
getUserInfo()


function getGifts() {
  GetGiftsJs().then(res => {
    if (res.data.code == 200000) {
      dataArr.value = res.data.data
      /* console.log(res.data.data) */
    }
  })
}
getGifts()

const click = () => {
  if (flag.value) {
    const random = Math.floor(Math.random() * 8) + 1
    prizeId.value = random;
    /* console.log(prizeId.value) */
    // 添加抽奖记录
    AddLotteryRecord(prizeId.value).then(res => {
      console.log(res.data);
      getHistory()
      // 刷新用户积分
      getUserInfo()
    })
  } else {
    ElMessage.warning('积分不足，不可进行抽奖')
  }


};

// 查看用户的抽奖记录
// 添加历史记录相关数据
const historyList = ref([]);

// 获取历史记录
const getHistory = async () => {
  try {
    const res = await GetLotteryHistory();
    if (res.data.code === 200000) {
      /* console.log(res.data.data, '-----------') */
      historyList.value = res.data.data;
      res.data.data.forEach(item => {
        console.log(item.chargeUserGift.description)
      })
    }
  } catch (error) {
    console.error('获取历史记录失败:', error);
  }
};

getHistory()

// 兑换奖品
const exchangeGoods = (item, index) => {
  console.log(item.id,'----------id');
  
  ExchangeGoods(item.id).then(res => {
    if (res.data.code == 200000) {
      console.log("兑换成功");
      // 设置按钮为已点击状态
      historyList.value[index].clicked = true;
      ElMessage.success(res.data.data)
      getHistory()
    } else {
      console.log("兑换失败");
      ElMessage.success(res.data.data)
    }
  })
}
</script>

<style scoped>
.lottery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.history-container {
  width: 100%;
  max-width: 500px;
  padding: 15px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.history-list {
  max-height: 300px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.history-item:last-child {
  border-bottom: none;
}

.slogan {
  font-size: 20px;
  color: #e4393c;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
}
</style>